<template>
	<BaseContainer>
		<aplid-base-crud ref="crud" class="w-100" v-bind="baseConfig" :saveFormate="saveFormate" :operateFormate="operateFormate">
			<template v-slot:assessedOrganizationForm="{ model, row }">
				<div>
					<div class="flex align-center">
						<el-button type="primary" size="small" :disabled="!model.evaluateThirdPartiesCreditCode" @click="handleOpenDraw(model, row)"
							>刷选器</el-button
						>
					</div>
					<div class="mt10">
						<el-space wrap>
							<el-tag v-for="tag in orgList" :key="tag.label" class="mx-1" closable type="info" @close="handleClose(tag)">
								{{ tag.label }}
							</el-tag>
						</el-space>
					</div>
				</div>
			</template>
			<template v-slot:effectiveTime="{ row }">
				{{ [row.effectiveStartTime, row.effectiveEndTime].toString() }}
			</template>
			<template v-slot:detailDialog="{ row, show }">
				<TaskDetail :nowRowData="row" v-if="show"></TaskDetail>
			</template>
		</aplid-base-crud>

		<el-drawer v-model="drawer" :with-header="false" size="70%" :modal="false" append-to-body>
			<el-page-header @back="drawer = !drawer">
				<template #content>
					<span class="text-large font-600 mr-3"> 勾选需要的选项 </span>
				</template>
			</el-page-header>

			<AssociateCheck
				@change="onSelectCheck"
				:paramsObj="{
					serviceProviderId: nowRowData.evaluateThirdPartiesCreditCode,
				}"
			></AssociateCheck>
		</el-drawer>
	</BaseContainer>
</template>

<script setup>
import { baseConfig } from './config'
import TaskDetail from './TaskDetail/index.vue'
import remoteSelect from '@/components/AplidCrud/src/AplidRemote/index'
import AssociateCheck from './AssociateCheck.vue'

const drawer = ref(false)
const nowRowData = ref({
	evaluateThirdPartiesCreditCode: '',
})
const orgList = ref([])

const onSelectCheck = (arr, data) => {
	orgList.value = arr
}
const handleOpenDraw = (model) => {
	nowRowData.value = model
	drawer.value = true
}

const operateFormate = (row, type) => {
	return new Promise((resolve, reject) => {
		if (type == 'edit') {
			const f = row.assessedFacility?.split(',') || []
			const newF = f
				.map((item) => {
					if (!item) return
					return {
						label: item,
						value: item,
						type: 'soleValue',
					}
				})
				.filter(Boolean)

			const _org = row.assessedOrganization?.split(',') || []
			const _org_name = row.assessedOrganizationName?.split(',') || []
			const _org_data = _org
				.map((item, index) => {
					if (!item) return
					return {
						label: _org_name[index],
						value: item,
						type: 'creditCode',
					}
				})
				.filter(Boolean)
			orgList.value = [...newF, ..._org_data]
		} else {
			orgList.value = []
		}
		resolve(row)
	})
}

const saveFormate = (form) => {
	return new Promise((resolve, reject) => {
		const _getData = (type) => orgList.value.filter((item) => item.type == type).map((item) => item.value)
		const assessedFacility = _getData('soleValue')
		const assessedOrganization = _getData('creditCode')
		const assessedOrganizationName = orgList.value.filter((item) => item.type == 'creditCode').map((item) => item.label)
		resolve({
			...form,
			assessedFacility: assessedFacility.join(','),
			assessedOrganization: assessedOrganization.join(','),
			assessedOrganizationName: assessedOrganizationName.join(','),
		})
	})
}
</script>

<style lang="scss" scoped></style>
